<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点</title>
</head>
<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <script>
        let box=document.querySelector(".box");
        // console.log(box.childNodes);
        console.log(box.children);
        console.log(box.childElementCount);
        // let one=box.children[0];
        let one=box.firstElementChild;
        console.log(one);
        // console.log(one.nextSibling);
        console.log(one.nextElementSibling);
        let three=box.children[2];
        // let three=box.lastElementChild;
        console.log(three);
        // console.log(three.previousSibling);
        console.log(three.previousElementSibling);
        console.log(one.parentNode)
        // console.log(one.parentElement)
        console.log(one.nodeType);
        console.log(one.nodeName);
        console.log(one.nodeValue);
        const pEle=document.createElement("p");
        pEle.innerText="hello";
        box.appendChild(pEle);
        box.insertBefore(pEle,three);
        box.removeChild(one);
        box.replaceChild(pEle,three);
        let r=box.cloneNode(true);
        document.body.appendChild(r);
    </script>
</body>
</html>